<template>
  <el-card shadow="never" class="border-0">
    <el-table :data="tableData" stripe style="width: 100%" :default-sort="{ prop: 'id', order: 'descending' }">
      <el-table-column type="expand" @cell-click="tests">
        <template #default="scope">
          <div>
            <detailVue :table_index="scope.row.id" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="ID" width="80" prop="id">
        <template #default="{ row }">
          <div class="flex items-center">
            <small>{{ row.id }}</small>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('源IP')" width="190" align="center">
        <template #default="{ row }">
          {{ row.src_ip }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('目的IP')" width="190" align="center">
        <template #default="{ row }">
          {{ row.dest_ip }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('攻击类型')" width="140" align="center">
        <template #default="{ row }">
          {{ row.attack_type }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('资源路径')" width="300" align="center">
        <template #default="scope">
          {{ scope.row.resource_path }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('源端口')" width="120" align="center">
        <template #default="{ row }">
          {{ row.src_port }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('目的端口')" width="160" align="center">
        <template #default="{ row }">
          {{ row.dest_port }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('时间')" width="280" align="center">
        <template #default="{ row }">
          {{ row.time }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('协议')" width="100" align="center">
        <template #default="{ row }">
          {{ row.protocol }}
        </template>
      </el-table-column>
      <el-table-column :label="proxy.$t('威胁等级')" width="130" align="center">
        <template #default="{ row }">
          {{ row.threat_level === 'None' ? 0 : row.threat_level }}
        </template>
      </el-table-column>
    </el-table>

    <!-- 下一页,需要配置useInitTable -->
    <div class="flex items-center justify-center mt-5">
      <el-pagination layout="prev, pager ,next" background :total="total" :current-page="currentPage" :page-size="limit"
        @current-change="handleCurrentChange" @next-click="() => handleCurrentChange"
        @prev-click="() => handleCurrentChange" />
    </div>

    <!-- 新增数据 的模板 -->
    <!--    <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">-->
    <!--      <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">-->
    <!--        <el-form-item :label="用户名" prop="username">-->
    <!--          <el-input v-model="form.username" placeholder="用户名"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="密码" prop="password">-->
    <!--          <el-input v-model="form.password" placeholder="密码"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="昵称" prop="nickname">-->
    <!--          <el-input v-model="form.nickname" placeholder="昵称"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="头像" prop="avatar">-->
    <!--          <ChooseImage v-model="form.avatar"/>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="会员等级" prop="user_level_id">-->
    <!--          <el-select v-model="form.user_level_id" placeholder="选择会员等级">-->
    <!--            <el-option v-for="item in user_level" :key="item.id" :label="item.name" :value="item.id">-->
    <!--            </el-option>-->
    <!--          </el-select>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="手机" prop="phone">-->
    <!--          <el-input v-model="form.phone" placeholder="手机"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="邮箱" prop="email">-->
    <!--          <el-input v-model="form.email" placeholder="邮箱"></el-input>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item :label="状态" prop="content">-->
    <!--          <el-switch v-model="form.status" :active-value="1" :inactive-value="0">-->
    <!--          </el-switch>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--    </FormDrawer>-->

  </el-card>
</template>
<script setup>
import { ref, getCurrentInstance } from 'vue'
import detailVue from './detail.vue'
// import FormDrawer from '~/components/FormDrawer.vue'
// import ChooseImage from '~/components/ChooseImage.vue'
// import { getLiuLiang } from '../../api/test'
import { getLiuLiang } from '../../api/base'
const { proxy } = getCurrentInstance();
function tests() {
  console.log('tab_click')
}
function handleCurrentChange(pageNum) {
  currentPage.value = pageNum
  getLiuLiang(currentPage.value).then(res => {
    // console.log('user_list_res',res)
    tableData.value = res.results // 经常需要改
  })
}

const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)



const tableData = ref([])
getLiuLiang().then(res => {
  // console.log('user_list_res',res)
  tableData.value = res.results // 经常需要改
  total.value = 1000
})
</script>